<template>
	<view>
		<view class="detail-box">
			<w-tabs :tabList="tabList" :scrollable="true" :current="current" :activeStyle="{color:'#000;'}" @change="changeValue"></w-tabs>
		</view>
		<view v-if="product.goods_type == 1 && list.length" class="bg-color-white plr-16 ptb-20">
			<view class="flex flex-ai-center flex-js-sb">
				<w-title-color entitle="UNBOXING" title="拆盒记录" />
				<!-- <view class="more-record-btn flex flex-ai-center flex-js-center">
					<view class="mr-4">更多记录</view>
					<image :src="$ossUrl + '/static/icon/right-theme.png'" style="width: 6rpx;height: 14rpx;"></image>
				</view> -->
			</view>
			<u-gap height="16"></u-gap>
			<view v-for="(item,index) in list" :key="item.id" class="">
				<view class="flex flex-ai-center flex-js-sb">
					<view class="flex flex-ai-center">
						<u-avatar size="40"></u-avatar>
						<view class="flex flex-dir-col ml-12">
							<view class="font-size-15" style="color: #1e1e1e;">{{item.userss.nickname}}</view>
							<view class="date-text">{{item.createtime|formatDate}}</view>
						</view>
					</view>
					<view class="font-size-15" style="color: #1e1e1e;">{{item.collections.name}}</view>
				</view>
				<u-line margin="24rpx 0" v-if="list.length != index + 1"></u-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"w-product-detail",
		props:{
			product:{
				type:Object,
				default: () => {
					return {}
				}
			},
			list:{
				type:Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				tabList:[
					{
						name:'藏品信息',
						value:'all'
					},
					{
						name:'相关公告',
						value:'notice'
					}
				],
				current:0
			};
		},
		methods:{
			changeValue(e){
				this.current = e.index
				if(this.current == 1) {
					setTimeout(() => {
						this.current = 0
					},1000)
					uni.navigateTo({
						url:`/pages/notice/search?keyword=${this.product.name}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-box {
		// height: 102rpx;
		background-image: url($IMG_URL + '/static/bg/product-detail-tab-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
	}
	.more-record-btn {
		width: 162rpx;
		height: 31px;
		background: #E9ECFD;
		border-radius: 16px 16px 16px 16px;
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 600;
		font-size: 12px;
		color: #1952F8;
	}
	.date-text {
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 400;
		font-size: 24rpx;
		color: #979797;
		margin-top: 12rpx;
	}
</style>